<template>
<!-- 接收签到 -->
  <el-container>
    <el-main>
      <div ref="popover">
        <h2 >{{this.SignMes.name}}</h2>
        <span class="flowTime" v-if="!showTitle">距签到结束还剩 <i>{{this.timeMin}} </i>分钟</span>
        <span class="flowTime" v-if="showTitle">该签到已结束</span>
        <span>发布时间：{{this.SignMes.createtime | dateFmt}}</span>
        <span>发布人：{{this.SignMes.creator}}</span>
      </div>

      <el-popconfirm @confirm="pop" title="确定删除吗？">
        <el-button
          slot="reference"
          type="danger"
          icon="el-icon-delete"
          class="Sign-del"
          plain
          circle
        ></el-button>
      </el-popconfirm>
    </el-main>
    <el-aside>
      <div  v-if="!shouNoSign" >
        <el-button class="signBtn" v-if="showBtn" circle @click="signUp">签到</el-button>
        <el-button type="success" v-if="!showBtn" icon="el-icon-check" circle></el-button>
      </div>
      <el-button type="info" v-if="shouNoSign" circle>已截至</el-button>
    </el-aside>
  </el-container>
</template>

<script>
import moment from 'moment'
import { InSign, popSign } from '@/utils/api/sign.js'
export default {
  name: 'ReceiveSign',
  props: ['thisSign'],
  components: {},
  inject: ['reload'],
  data () {
    var times = moment(this.thisSign.createtime).format('YYYY-MM-DD HH:mm:ss')
    return {
      // 该签到的信息
      SignMes: this.thisSign,
      reFresh: true,
      // 签到按钮与成功按钮的显示
      showBtn: true,
      // 未签到且已过时显示
      shouNoSign: false,
      showTitle: false,
      // 该签到的起始时间
      flotime: times,
      // 时间定时器
      timeOut: null,
      // 秒级时间
      time: 0,
      // 分钟级时间
      timeMin: 0
    }
  },
  filters: {
    // 格式化时间的过滤器
    dateFmt (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created () {
    // 获取当前倒计时时长
    const date = this.findTime()

    // 倒计时结束
    if (date <= 0) {
      this.showTitle = true
    } else {
    // 倒计时未结束
      this.setTime()
    }
    // 超时显示并且未签到
    if (date <= 0 && !this.SignMes.ischeck) {
      this.shouNoSign = true
    }

    // 若已经签到成功，则样式为签到后
    if (this.SignMes.ischeck) {
      this.$nextTick(() => {
        this.fontColr()
      })
    }
  },
  methods: {
    // 用户确认是否签到
    signUp () {
      this.$confirm('是否签到', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          // 签到成功
          this.fontColr()
          // 发起签到请求
          InSign(this.SignMes.sid).then(() => {
            this.$message({
              type: 'success',
              message: '签到成功'
            })
          })
        })
        .catch(() => {
          // 签到失败
          this.$message({
            type: 'info',
            message: '已取消签到'
          })
        })
    },
    // 改变签到后字体颜色
    fontColr () {
      this.$refs.popover.style.color = '#ddd'
      this.showBtn = false
    },
    // 删除处理
    pop () {
      this.$emit("SignDel", this.SignMes.sid)
      popSign(this.SignMes.sid).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }
      })
    },
    setTime () {
      this.timeOut = setInterval(() => {
        setTimeout(() => {
          const date = this.findTime()
          if (date <= 0) {
            if (!this.SignMes.ischeck) {
              this.reload()
            }
            window.clearInterval(this.timeOut);
            return
          }
          // const time = Math.ceil((date) / (1000)); // 秒数
          const timeMin = Math.ceil((date) / (1000 * 60)); // 分钟数
          // this.time = time > 0 ? time : 0;
          this.timeMin = timeMin > 0 ? timeMin : 0;
        }, 0)
      }, 2000)
    },
    // 计算时间的函数
    findTime () {
      const timedate = new Date(this.flotime);
      // 截止时间
      const deadtime = timedate.valueOf() + this.SignMes.expiretime * 1000
      const now = new Date().valueOf();
      // 倒计时 毫秒级
      const date = deadtime - now;
      return date;
    }
  },
  destroyed () {
    window.clearInterval(this.timeOut);
  },
}
</script>
<style lang="less" scoped>
.el-container {
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: #FFF;
  margin-bottom: 10px;
  .el-main {
    padding: 10px 20px;
    position: relative;
    span {
      margin: 0 20px;
    }
  }
  .flowTime{
    position: absolute;
    right: 0;
    bottom: 40%;
    i{
      color: #f56c6c;
    }
  }
  .Sign-del{
    background-color: #FFF;
    color: #000;
    border: none;
  }
  .Sign-del:hover{
    color: #f56c6c;
  }
  .el-aside {
    position: relative;
    padding: 10px 20px;
    .el-button {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -10%;
      width: 60px;
      height: 60px;
    }
    .signBtn{
      background-color: rgb(250, 205, 145);
    }
  }
}
</style>
